<script type="text/javascript">
$(document).ready(function () {
	//var theme = 'fresh';
    var unitkerja_task = "CREATE";
    var btn_unitkerja_task = "";
	var formExpandVar = 0;
    var editrow = -1;
	
	var navbar = $("#jqxNavigationBar");
	navbar.jqxNavigationBar({ width: '100%', height:"100px", sizeMode: 'auto', theme: theme, toggleMode:'none' });
	
	/* START DATA */
	//data child
	var subUnitDataStore = { 
            	datafields: [
                	{ name: 'KODEUNIT' },
                	{ name: 'NAMAUNIT' },
                	{ name: 'DEPTH' }
       			],
                id: 'KODEUNIT',
                datatype: "json",
                url: 'index.php?c=c_unitkerja&m=get_sub_byunitkerja',
            	root: 'data'
			};
	
    var initrowdetails = function (index, parentElement, gridElement) {
		var tabsdiv = null;
        var information = null;
        //var notes = null;
        tabsdiv = $($(parentElement).children()[0]);

        var rows = $("#jqxgrid").jqxGrid('getrows');
        var datarecord = rows[index];

        var grid = $($.find('#grid' + index));
        grid.bind('bindingcomplete', function (event) {
            if (event.target.id == "grid" + index) {
                grid.jqxGrid('beginupdate');
                var datainformation = grid.jqxGrid('getdatainformation');
                for (var i = 0; i < datainformation.rowscount; i++) {
                    var hidden = true;
                    grid.jqxGrid('setrowdetails', i, "<div id='subgrid" + i + "' style='margin: 10px;'></div>", 220, hidden);
                }
                grid.jqxGrid('endupdate');
            }
        });

        if (tabsdiv != null) {
        	information = $.find('.information' + index);
            //notes = $.find('.notes' + index);

            var container = $('<div id="jqxgridSubUnit" style="margin: 0px;"></div>');
            container.appendTo($(information));
            //var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
            //container.append(leftcolumn);


          	//var kodeunit = "<div style='margin: 10px;'><b>NIP:</b> " + datarecord.KODEUNIT + "</div>";
            //var namaunit = "<div style='margin: 10px;'><b>Nama:</b> " + datarecord.NAMAUNIT + "</div>";
            //$(leftcolumn).append(kodeunit);
            //$(leftcolumn).append(namaunit);
            
            subUnitDataStore["data"] = {kodeunit: datarecord.KODEUNIT, depth: datarecord.DEPTH};
            
            var dataAdapterSubUnit = new $.jqx.dataAdapter(subUnitDataStore);
            var editrowDesc = -1;

            // initialize jqxGrid
            $("#jqxgridSubUnit").jqxGrid({
				width: '96%',
                height: 50,
                source: dataAdapterSubUnit,
                theme: theme,
                pageable: false,
                autoheight: true,
                rowdetails: true,
                initrowdetails: initrowdetails,
                columns: [
                          { text: 'KODE UNIT', dataField: 'KODEUNIT', width: 120 },
                          { text: 'NAMA UNIT', dataField: 'NAMAUNIT', width: 180 }
               	]
          	});

         	//set rows details.
            $("#jqxgridSubUnit").bind('bindingcomplete', function (event) {
                if (event.target.id == "jqxgrid") {
                	$("#jqxgridSubUnit").jqxGrid('beginupdate');
                    var datainformation = $("#jqxgridSubUnit").jqxGrid('getdatainformation');
                    var rows = $("#jqxgridSubUnit").jqxGrid('getrows');
                    for (i = 0; i < datainformation.rowscount; i++) {
                        var hidden = i > 0 ? true : false;
                        //jqxgrid.jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, hidden);
                        $("#jqxgridSubUnit").jqxGrid('setrowdetails', i, 
                        	"<div class='tabs"+i+"' style='margin: 10px; white-space:normal;'>"+
                                "<ul style='margin-left: 30px;'>"+
                                	"<li>"+rows[i].KODEUNIT+"</li>"+
                                "</ul>"+
                                "<div class='information"+i+"'></div>"+
                       		"</div>", 250, true);
                    }
                    $("#jqxgridSubUnit").jqxGrid('resumeupdate');
                }
            });

            //var notescontainer = $('<div style="white-space: normal; margin: 5px;"><span>' + datarecord.notes + '</span></div>');
            //$(notes).append(notescontainer);
            $(tabsdiv).jqxTabs({ width: 600, height: 170, theme: theme });
		}
	};

	var get_subUnitDataStore = function(grid, datarecord){
		subUnitDataStore["data"] = {kodeunit: datarecord.KODEUNIT, depth: datarecord.DEPTH};
        var dataAdapterSubUnit = new $.jqx.dataAdapter(subUnitDataStore);
        var editrowDesc = -1;
        grid.jqxGrid({
            rowdetails: true,
            initrowdetails: initlevel2,
            source: dataAdapterSubUnit,
            theme: theme,
            width: '96%',
            autoheight: true,
            columns: [
                      { text: 'KODE UNIT', dataField: 'KODEUNIT', width: 120 },
                      { text: 'NAMA UNIT', dataField: 'NAMAUNIT', width: 180 }
           	]
        });
	};

	var initlevel2 = function (index, parentElement, gridElement) {
		var p_grid = $('#'+gridElement.id);
		var rows = p_grid.jqxGrid('getrows');
        var datarecord = rows[index];
        var current_level = eval(datarecord.DEPTH) + 1;
        var child_level = current_level + 1;
        
        var grid = $($.find('#grid'+ current_level + "" + index));
        grid.bind('bindingcomplete', function (event) {
            if (event.target.id == "grid"+ current_level + "" + index) {
                grid.jqxGrid('beginupdate');
                var datainformation = grid.jqxGrid('getdatainformation');
                for (var i = 0; i < datainformation.rowscount; i++) {
                    var hidden = true;
                    grid.jqxGrid('setrowdetails', i, "<div id='grid"+ child_level + "" + i + "' style='margin: 10px;'></div>", 220, hidden);
                }
                grid.jqxGrid('endupdate');
            }
        });
        if (grid != null) {
        	get_subUnitDataStore(grid, datarecord);
        }
    };

    /*var initlevel3 = function (index, parentElement, gridElement) {
        var p_grid = $('#'+gridElement.id);
		var rows = p_grid.jqxGrid('getrows');
        var datarecord = rows[index];
        var current_level = eval(datarecord.DEPTH) + 1;
        var child_level = current_level + 1;

        var grid = $($.find('#grid'+ current_level + "" + index));
        grid.bind('bindingcomplete', function (event) {
            if (event.target.id == "grid"+ current_level + "" + index) {
                grid.jqxGrid('beginupdate');
                var datainformation = grid.jqxGrid('getdatainformation');
                for (var i = 0; i < datainformation.rowscount; i++) {
                    var hidden = true;
                    grid.jqxGrid('setrowdetails', i, "<div id='grid"+ child_level + "" + i + "' style='margin: 10px;'></div>", 220, hidden);
                }
                grid.jqxGrid('endupdate');
            }
        });
        if (grid != null) {
        	subUnitDataStore["data"] = {kodeunit: datarecord.KODEUNIT, depth: datarecord.DEPTH};
            var dataAdapterSubUnit = new $.jqx.dataAdapter(subUnitDataStore);
            var editrowDesc = -1;
            
            grid.jqxGrid({
            	rowdetails: true,
                initrowdetails: initlevel2,
                source: dataAdapterSubUnit,
                theme: theme,
                width: '96%',
                autoheight: true,
                columns: [
                          { text: 'KODE UNIT', dataField: 'KODEUNIT', width: 120 },
                          { text: 'NAMA UNIT', dataField: 'NAMAUNIT', width: 180 }
               	]
            });
        }
    };*/
	
	// prepare the data
	var source =
	{
		datatype: "json",
		datafields: [
			{ name: 'KODEUNIT' },
			//{ name: 'P_KODEUNIT' },
			//{ name: 'P_NAMAUNIT' },
			{ name: 'NAMAUNIT' },
			//{ name: 'LEAF'}
			{ name: 'DEPTH' }
		],
		id: 'KODEUNIT',
		url: 'index.php?c=c_unitkerja&m=get_list',
		root: 'data'
	};
	var dataAdapter = new $.jqx.dataAdapter(source);

	var jqxgrid = $("#jqxgrid");
	jqxgrid.jqxGrid(
	{
		width: '100%',
		source: dataAdapter,
		theme: theme,
		sortable: true,
        pageable: true,
        autoheight: true,
        //height: 250,
        rowdetails: true,
        //initrowdetails: initrowdetails,
        initrowdetails: initlevel2,
		columns: [
			{ text: 'KODE UNIT', dataField: 'KODEUNIT', width: 120 },
			{ text: 'NAMA UNIT', dataField: 'NAMAUNIT', width: 180 },
			//{ text: 'LEAF', dataField: 'LEAF', width: 100 },
			{ text: 'Edit', datafield: 'Edit', width: 125, columntype: 'button', cellsrenderer: function () {
				return "Edit";
			}, buttonclick: function (row) {
				// open form Create/Update.
				editrow = row;
				
				// get the clicked row's data and initialize the input fields.
				var dataRecord = jqxgrid.jqxGrid('getrowdata', editrow);
				cu_formSet(dataRecord);
			}
			}
		]
	});

	// set rows details.
    /*jqxgrid.bind('bindingcomplete', function (event) {
        if (event.target.id == "jqxgrid") {
        	jqxgrid.jqxGrid('beginupdate');
            var datainformation = jqxgrid.jqxGrid('getdatainformation');
            var rows = jqxgrid.jqxGrid('getrows');
            for (i = 0; i < datainformation.rowscount; i++) {
                var hidden = i > 0 ? true : false;
                //jqxgrid.jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, hidden);
                jqxgrid.jqxGrid('setrowdetails', i, 
                	"<div class='tabs"+i+"' style='margin: 10px; white-space:normal;'>"+
                        "<ul style='margin-left: 30px;'>"+
                        	"<li>"+rows[i].KODEUNIT+"</li>"+
                        "</ul>"+
                        "<div class='information"+i+"'></div>"+
               		"</div>", 250, true);
            }
            jqxgrid.jqxGrid('resumeupdate');
        }
    });*/
    $("#jqxgrid").bind('bindingcomplete', function (event) {
        if (event.target.id == "jqxgrid") {
            $("#jqxgrid").jqxGrid('beginupdate');
            var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
            var rows = $("#jqxgrid").jqxGrid('getrows');
            
            
            for (var i = 0; i < datainformation.rowscount; i++) {
            	var child_level = eval(rows[i].DEPTH) + 1;
                var hidden = i > 0 ? true : false;
                $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid"+ child_level + "" + i + "' style='margin: 10px;'></div>", 320, true);
            }
            $("#jqxgrid").jqxGrid('endupdate');
        }
    });
	
	// initialize jqxGridJabForm
	var generaterow = function (i) {
		var row = {};
		
		row["KODEJAB"] = "KODE";
		row["NAMAJAB"] = "NAMA";
		row["HITUNGLEMBUR"] = 0;
		row["KOMPENCUTI"] = 0;
		return row;
	};
	
	var source_JabForm = {};
	source_JabForm['datatype'] = "json";
	source_JabForm['datafields'] = [
			{ name: 'KODEUNIT' },
			{ name: 'KODEJAB' },
			{ name: 'NAMAJAB' },
			{ name: 'HITUNGLEMBUR', type: 'bool'},
			{ name: 'KOMPENCUTI', type: 'bool'}
		];
	source_JabForm['url'] = "index.php?c=c_unitkerja&m=get_jab_byunitkerja";
	source_JabForm['root'] = "data";
	source_JabForm['addrow'] = function (rowid, rowdata) {
			// synchronize with the server - send insert command
		};
	source_JabForm['deleterow'] = function (rowid) {
			// synchronize with the server - send delete command
		};
	source_JabForm['deleterow'] = function (rowid, newdata) {
			// synchronize with the server - send update command
		};
	
	var jqxgrid_jabform = $("#jqxGridJabForm");
	jqxgrid_jabform.jqxGrid(
	{
		width: 600,
		height: 180,
		//source: source_JabForm,
		theme: theme,
		editable: true,
		selectionmode: 'singlerow',
		columns: [
		  { text: 'KODE JABATAN', datafield: 'KODEJAB', width: 120 },
		  { text: 'NAMA JABATAN', datafield: 'NAMAJAB', width: 200 },
		  { text: 'HITUNG LEMBUR', datafield: 'HITUNGLEMBUR', columntype: 'checkbox', width: 120 },
		  { text: 'KOMPEN CUTI', datafield: 'KOMPENCUTI', columntype: 'checkbox', width: 120 }
		]
	});

	// prepare the data
    /*var data = new Array();
    var firstNames =
    [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames =
    [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames =
    [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues =
    [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    
    for (var i = 0; i < 10; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;
        data[i] = row;
    }
    var source = {
        localdata: data,
        datatype: "array"
    };

    // set rows details.
    $("#jqxgrid").bind('bindingcomplete', function (event) {
        if (event.target.id == "jqxgrid") {
            $("#jqxgrid").jqxGrid('beginupdate');
            var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
            for (i = 0; i < datainformation.rowscount; i++) {
                var hidden = i > 0 ? true : false;
                $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, hidden);
            }
            $("#jqxgrid").jqxGrid('endupdate');
        }
    });
    var dataAdapter = new $.jqx.dataAdapter(source);
    
    // create nested grid.
    var initlevel2 = function (index) {
        var grid = $($.find('#grid' + index));
        grid.bind('bindingcomplete', function (event) {
            if (event.target.id == "grid" + index) {
                grid.jqxGrid('beginupdate');
                var datainformation = grid.jqxGrid('getdatainformation');
                for (var i = 0; i < datainformation.rowscount; i++) {
                    var hidden = true;
                    grid.jqxGrid('setrowdetails', i, "<div id='subgrid" + i + "' style='margin: 10px;'></div>", 220, hidden);
                }
                grid.jqxGrid('endupdate');
            }
        });
        if (grid != null) {
            var dataAdapter = new $.jqx.dataAdapter(source);
            grid.jqxGrid({
                rowdetails: true,
                initrowdetails: initlevel3,
                source: dataAdapter,
                theme: theme,
                width: 800,
                height: 200,
                columns: [
                    { text: 'First Name', dataField: 'firstname', width: 100 },
                    { text: 'Last Name', dataField: 'lastname', width: 100 },
                    { text: 'Product', dataField: 'productname', width: 180 },
                    { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
                ]
            });
        }
    }
    
    var initlevel3 = function (index) {
        var grid = $($.find('#subgrid' + index));
        var dataAdapter = new $.jqx.dataAdapter(source);
        if (grid != null) {
            grid.jqxGrid({
                source: dataAdapter,
                theme: theme,
                width: 730,
                height: 200,
                columns: [
                    { text: 'First Name', dataField: 'firstname', width: 100 },
                    { text: 'Last Name', dataField: 'lastname', width: 100 },
                    { text: 'Product', dataField: 'productname', width: 180 },
                    { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
                ]
            });
        }
    }
    
    // creage jqxgrid
    $("#jqxgrid").jqxGrid({
        width: 870,
        height: 265,
        autoheight: true,
        source: dataAdapter,
        theme: theme,
        rowdetails: true,
        initrowdetails: initlevel2,
        columns: [
            { text: 'First Name', dataField: 'firstname', width: 100 },
            { text: 'Last Name', dataField: 'lastname', width: 100 },
            { text: 'Product', dataField: 'productname', width: 180 },
            { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
            { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
            { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
        ]
    });*/
	/* END DATA */

	/* START FORM */
	//initialize field
	$('.text-input').addClass('jqx-input');
	$('.text-input').addClass('jqx-rc-all');
	$('.text-input').width(200);
	$('.text-input').height(23);
	if (theme.length > 0) {
		$('.text-input').addClass('jqx-input-' + theme);
		$('.text-input').addClass('jqx-widget-content-' + theme);
		$('.text-input').addClass('jqx-rc-all-' + theme);
	}
	
	var textfield_kodeunit_lama = $("#unitkerja_kodeunit_lama");
	var textfield_kodeunit = $("#unitkerja_kodeunit");
	var combofield_p_kodeunit = $("#unitkerja_p_kodeunit");
	var textfield_namaunit = $("#unitkerja_namaunit");
	var radiofield_leafyes = $("#unitkerja_leafYes");
	var radiofield_leafno = $("#unitkerja_leafNo");
	
	var create_btn = $("#createBtn");
	var save_btn = $("#Save");
	var cancel_btn = $("#Cancel");
	
	var addrow_jabform_btn = $("#addrowJabFormBtn");
	var deleterow_jabform_btn = $("#deleterowJabFormBtn");
	
    radiofield_leafyes.jqxRadioButton({ width: 50, height: 25, checked: true, theme: theme });
    radiofield_leafno.jqxRadioButton({ width: 50, height: 25, checked: false, theme: theme });
	
	// initialize the popup window and buttons.
	create_btn.jqxButton({ theme: theme });
	save_btn.jqxButton({ theme: theme });
	cancel_btn.jqxButton({ theme: theme });
	
	var unitkerjaForm = $('#unitkerjaForm');
	unitkerjaForm.jqxValidator({
		rules: [
			   { input: textfield_kodeunit, message: 'Field Kode Unit is required!', action: 'keyup, blur', rule: 'required' }
			   ],
		theme: theme
	});
	textfield_kodeunit.prop('maxlength', 5);
	
	var saving_notice = $("#saveUnitkerjaNotice");
	var ok = $("#ok");
	var message_notice = $('#eventLog');
	saving_notice.jqxWindow({ width: 320, height: 110, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: $("#ok"), modalOpacity: 0.05, position: { x: 400, y: 100 } });
    ok.jqxButton({ theme: theme });
	
	//cb-parent kodeunit
    var source_columnsCBUnitkerja = [
		{ name: 'KODEUNIT' },
        { name: 'NAMAUNIT' }
	];
	var sourceCBUnitkerja = {
		datatype: "json",
        datafields: source_columnsCBUnitkerja,
        id: 'KODEUNIT',
        url: 'index.php?c=c_public_function&m=cbget_unitkerja_list',
        root: 'data'
	};
    var dataAdapterCBUnitkerja = new $.jqx.dataAdapter(sourceCBUnitkerja);
    //combofield_p_kodeunit.jqxComboBox({ source: dataAdapterCBUnitkerja});
	combofield_p_kodeunit.jqxComboBox({ source: dataAdapterCBUnitkerja, displayMember: "NAMAUNIT", valueMember: "KODEUNIT", width: 200, height: 23, theme: theme });
	
	
	addrow_jabform_btn.jqxButton({ width: '110', theme: theme });
	deleterow_jabform_btn.jqxButton({ width: '110', theme: theme });
    /* END FORM */
	
	/* START ACTION */
    // update the edited row when the unitkerja clicks the 'Save' button.
    save_btn.click(function () {
		var form_validate = unitkerjaForm.jqxValidator('validate');
		if(form_validate){
			var unitkerja_kodeunit_lama_field = "";
			var unitkerja_kodeunit_field = "";
			var unitkerja_p_kodeunit_field = "";
			var unitkerja_namaunit_field = "";
			var unitkerja_leaf_field = "";
			var rowsjab = jqxgrid_jabform.jqxGrid('getrows');
			
			if(textfield_kodeunit_lama.val() !== null || textfield_kodeunit_lama.val() !== ''){
				unitkerja_kodeunit_lama_field = textfield_kodeunit_lama.val();
			}
			if(textfield_kodeunit.val() !== null || textfield_kodeunit.val() !== ''){
				unitkerja_kodeunit_field = textfield_kodeunit.val();
			}
			if(combofield_p_kodeunit.jqxComboBox('getSelectedItem') !== null){
				unitkerja_p_kodeunit_field = combofield_p_kodeunit.jqxComboBox('getSelectedItem').value;
        	}
			if(textfield_namaunit.val() !== null || textfield_namaunit.val() !== ''){
				unitkerja_namaunit_field = textfield_namaunit.val();
			}
			if(radiofield_leafyes.jqxRadioButton('checked') == true){
				unitkerja_leaf_field = "Y";
			}else{
				unitkerja_leaf_field = "T";
			}
			
			var row = {
					task: unitkerja_task,
					kodeunit_lama: unitkerja_kodeunit_lama_field,
					kodeunit: unitkerja_kodeunit_field,
					p_kodeunit: unitkerja_p_kodeunit_field,
					namaunit: unitkerja_namaunit_field,
					leaf: unitkerja_leaf_field,
					rows: rowsjab
			};
			
			if (editrow >= 0) {
				//edit row
				$.ajax({
					type: 'POST',
					url: 'index.php?c=c_unitkerja&m=get_action',
					data: row,
					success: function(response){
						if(response==1){
							$('#jqxgrid').jqxGrid('updatebounddata');
							gridExpand();
						}else{
							alert(response);
						}
					}
				});
			}else{
				//add row
				$.ajax({
					type: 'POST',
					url: 'index.php?c=c_unitkerja&m=get_action',
					data: row,
					success: function(response){
						if(response==1){
							$('#jqxgrid').jqxGrid('updatebounddata');
							gridExpand();
						}else if(response==0){
							alert("Kode Unit sudah pernah ditambahkan!");
						}else{
							alert(response);
						}
					}
				});
				
			}
		}else{
			createNotice("Form belum lengkap!");
		}
    });

    cancel_btn.click(function () {
    	cu_formReset();
		
    	gridExpand();
    });
	
	create_btn.click(function () {
    	btn_unitkerja_task = "CREATE";
		
    	cu_formReset();
		
    	formExpand();
    	
    	textfield_kodeunit_lama.val(0);

    	textfield_kodeunit.prop('disabled', false);
        combofield_p_kodeunit.jqxComboBox({ disabled: false });
    });
	
	ok.click(function(){
    	message_notice.empty();
    	saving_notice.jqxWindow('hide');
    });
	
	addrow_jabform_btn.bind('click', function () {
		var datarow = generaterow();
		jqxgrid_jabform.jqxGrid('addrow', null, datarow);
	});
	
	// delete row.
	deleterow_jabform_btn.bind('click', function () {
		var selectedrowindex = jqxgrid_jabform.jqxGrid('getselectedrowindex');
		var rowscount = jqxgrid_jabform.jqxGrid('getdatainformation').rowscount;
		if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
			var id = jqxgrid_jabform.jqxGrid('getrowid', selectedrowindex);
			jqxgrid_jabform.jqxGrid('deleterow', id);
		}
	});
	
	combofield_p_kodeunit.bind('select', function (event) {
		var args = event.args;
		var item = combofield_p_kodeunit.jqxComboBox('getItem', args.index);
		var value = item.value;
		
		if(value == textfield_kodeunit.val()){
			combofield_p_kodeunit.jqxComboBox('clearSelection');
			alert("Pilihan Parent tidak diijinkan, karena 'Parent Kode Unit' sama dengan 'Kode Unit'.");
		}
	});
    
    /* END ACTION */

    /* START FUNCTION */
    function cu_formReset(){
		textfield_kodeunit_lama.val("");
		textfield_kodeunit.val("");
		textfield_namaunit.val("");
		radiofield_leafyes.jqxRadioButton({ checked: true });
		
		unitkerjaForm.jqxValidator('hide');
    }

    function cu_formSet(dataRecord){
        btn_unitkerja_task = "UPDATE";
		
		/*var arr_tglrevisi = dataRecord.TGLREVISI.split('-');
		var thn = arr_tglrevisi[0];
		var bln = arr_tglrevisi[1];
		var tgl = arr_tglrevisi[2];
		var set_tglrevisi = new Date(thn, (bln - 1), tgl);*/
		
		textfield_kodeunit_lama.val(dataRecord.KODEUNIT);
		textfield_kodeunit.val(dataRecord.KODEUNIT);
		combofield_p_kodeunit.find('input').val(dataRecord.P_NAMAUNIT);
		textfield_namaunit.val(dataRecord.NAMAUNIT);
		if(dataRecord.LEAF == 'Y'){
			radiofield_leafyes.jqxRadioButton({ checked: true });
			radiofield_leafno.jqxRadioButton({ checked: false });
		}else{
			radiofield_leafyes.jqxRadioButton({ checked: false });
			radiofield_leafno.jqxRadioButton({ checked: true });
		}
		
		source_JabForm['data'] = {kodeunit: dataRecord.KODEUNIT};
		jqxgrid_jabform.jqxGrid({ source: source_JabForm });

        
        formExpand();

        textfield_kodeunit.prop('disabled', true);
        combofield_p_kodeunit.jqxComboBox({ disabled: true });
    }
	
    function gridExpand(){
		gridExpandVar = 1;
		formExpandVar = 0;
    	navbar.jqxNavigationBar('expandAt', 0);
    }
    function formExpand(){
		gridExpandVar = 0;
		formExpandVar = 1;
    	navbar.jqxNavigationBar('expandAt', 1);
		
		//combofield_p_kodeunit.jqxComboBox({ source: dataAdapterCBUnitkerja});
    }
    /* END FUNCTION */
	
	navbar.bind('expandedItem', function (event) {
		if((event.item == 1) && (formExpandVar == 1) && (btn_unitkerja_task == "UPDATE")){
			unitkerja_task = "UPDATE";
		}else{
			unitkerja_task = "CREATE";
		}
	});
	navbar.jqxNavigationBar('expandAt', 0);
	navbar.jqxNavigationBar('collapseAt', 1);
	
	//$('#fs_jabatan').hide();
	
});
</script>

<style type="text/css">
    .text-input
    {
        height: 21px;
        width: 150px;
    }
    .register-table
    {
    	width: 350px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .register-table td, tr
    {
        margin: 0px;
        padding: 2px;
        border-spacing: 0px;
        border-collapse: collapse;
        font-family: Verdana;
        font-size: 12px;
    }
    h3 
    {
        display: inline-block;
        margin: 0px;
    }
    textarea
	{
	   resize: none;
	}
</style>

<div id='jqxNavigationBar'>
	<!--Header-->
	<div>Data</div>
	<!--Content-->
	<div>
		<div id="jqxgrid"></div>
	</div>
	<!--Header-->
	<div>Form Create/Update</div>
	<!--Content-->
	<div>
		<form id="unitkerjaForm" action="#">
		<div style="float: left;">
		<table class="register-table">
			<tr style="display: none;">
				<td align="right">KODEUNIT LAMA:</td>
				<td align="left"><input id="unitkerja_kodeunit_lama" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="150px">KODEUNIT:</td>
				<td align="left"><input id="unitkerja_kodeunit" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="150px">PARENT KODEUNIT:</td>
				<td align="left"><div id="unitkerja_p_kodeunit" class="text-input" ></div></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="150px">NAMAUNIT:</td>
				<td align="left"><input id="unitkerja_namaunit" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top">LEAF:</td>
				<td align="left" valign="top"><div style="float: left; vertical-align: middle;" id='unitkerja_leafYes'>Ya</div><div style="float: left;" id='unitkerja_leafNo'>Tidak</div></td>
			</tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px; padding-right: 10px;" align="left"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
			</tr>
		</table>
		</div>
		<div style="float: left; margin-left:10px;padding-top:10px;">
			<fieldset id="fs_jabatan">
				<legend>Daftar Jabatan</legend>
				<!--<table cellpadding="0px" cellspacing="0px">
					<tr>
						<td style="border:#000 1px solid">KODE JABATAN</td>
						<td style="border:#000 1px solid">NAMA JABATAN</td>
						<td>HITUNG LEMBUR</td>
						<td>KOMPENSASI CUTI</td>
						<td><input id="addrowJabFormBtn" type="button" value="Add Jabatan" /></td>
					</tr>
				</table>-->
				<table>
					<tr>
						<td><div id="jqxGridJabForm"></div></td>
						<td valign="top">
							<div><input id="addrowJabFormBtn" type="button" value="Add Jabatan" /></div>
							<div><input id="deleterowJabFormBtn" type="button" value="Delete Jabatan" /></div>
						</td>
					</tr>
				</table>
			</fieldset>
		</div>
		</form>
	</div>
</div>

<div style="margin-top: 10px;">
	<input id="createBtn" type="button" value="Create Data" />
</div>

<div id="saveUnitkerjaNotice">
    <div>Info</div>
    <div>
        <div id="eventLog"></div>
        <div style="float: right; margin-top: 15px;">
            <input type="button" id="ok" value="OK" style="margin-right: 10px" />
        </div>
    </div>
</div>